<template>
  <div class="container">
    <div class="list" v-for="(item,index) in data">
      <div :class="['list-index','index_'+index]">
        {{ index + 1 }}
      </div>
      <div class="list-content">
        <div class="list-content-tit">{{ item.assetName?item.assetName:'' }}</div>
        <div class="list-content-cont">
          <span>{{ item.ip?item.ip:'' }}</span> |
          <span>{{ item.userName?item.userName:'' }}</span>
          | <span>{{ item.assetType?item.assetType:'-' }}</span> | <span>{{ item.secLevel?item.secLevel:'-' }}</span>
        </div>
      </div>
      <div class="list-count">
        <div class="list-count-number">{{ item.eventTotal?item.eventTotal:0 }}</div>
        <div class="list-count-tit">事件数量</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    },
  }
}
</script>

<style scoped lang="scss">
.container {
  height:100% !important;
  padding:0 1rem .5rem 1rem;
  .list {
    display: flex;
    align-items: center;
    padding:.2rem 0;
    border-bottom: 1px solid rgba(59,139,255,0.4);
    .list-index {
      display: inline-block;
      width: 1.6rem;
      height: 1.6rem;
      line-height: 1.6rem;
      border-radius: 50%;
      font-size: 1.2rem;
    }

    .list-content {
      width:60%;
      flex:1;
      text-align: left;
      margin: 0 1rem;

      .list-content-tit {
        font-size: 1.1rem;
      }

      .list-content-cont {
        width: 100%;
        overflow:hidden; /*超出的部分隐藏起来。*/
        white-space:nowrap;/*不显示的地方用省略号...代替*/
        text-overflow:ellipsis;/* 支持 IE */
        span {
          font-size: 1rem;
        }
      }
    }

    .index_0 {
      background: #FF3535;
    }

    .index_1 {
      background: #FA8C16;
    }

    .index_2 {
      background: #FFC53D;
    }

    .index_3 {
      background: #00E1E4;
    }

    .index_4 {
      background: #3B8BFF;
    }

    .list-count {
      padding:.05rem .7rem;
      background: linear-gradient(to left, #03FFFF, #03FFFF) left top no-repeat,
      linear-gradient(to bottom, #03FFFF, #03FFFF) left top no-repeat,
      linear-gradient(to left, #03FFFF, #03FFFF) right top no-repeat,
      linear-gradient(to bottom, #03FFFF, #03FFFF) right top no-repeat,
      linear-gradient(to left, #03FFFF, #03FFFF) left bottom no-repeat,
      linear-gradient(to bottom, #03FFFF, #03FFFF) left bottom no-repeat,
      linear-gradient(to left, #03FFFF, #03FFFF) right bottom no-repeat,
      linear-gradient(to left, #03FFFF, #03FFFF) right bottom no-repeat;
      background-size: 1px 8px, 8px 1px, 1px 8px, 8px 1px;
      border: 1px solid #225c80;
      .list-count-number {
        font-size: 1rem !important;
        font-weight: 900;
        color: #03FFFF;
      }
      .list-count-tit{
        font-size:12px !important;
      }
    }
  }

}

</style>
